import React from 'react'
import styled from 'styled-components'

import Container from '../Container'
import Logo from '../Logo'

import AccountButton from './components/AccountButton'
import Nav from './components/Nav'
import TxButton from './components/TxButton'

const TopBar: React.FC = () => {
  return (
    <StyledTopBar>
      <Container size="lg">
        <StyledTopBarInner>
          <StyledTopBar32>
            <Logo />
          </StyledTopBar32>
          <StyledTopBar1>
          <Nav />
          </StyledTopBar1>
          <div style={{
            flex: 1,
            display: 'flex',
            justifyContent: 'flex-end'
          }}>
            <TxButton />
            <AccountButton />
          </div>
        </StyledTopBarInner>
        <StyledTopBar2>
          <Nav />
          </StyledTopBar2>
      </Container>
    </StyledTopBar>
  )
}

const StyledTopBar = styled.div`
  background: #2A169B;
`

const StyledTopBar32 = styled.div`
flex: 1;
@media (max-width: 768px) {
  flex: none;
}
`

const StyledTopBar1 = styled.div`
@media (max-width: 768px) {
  display: none;
}
`

const StyledTopBar2 = styled.div`
display: none;
margin-top: 12px;
padding-bottom: 6px;
  @media (max-width: 768px) {
    display: block;
  }
`

const StyledTopBarInner = styled.div`
  align-items: center;
  display: flex;
  justify-content: space-between;
  max-width: ${props => props.theme.siteWidth}px;
  width: 100%;
  flex-wrap: wrap;
`

export default TopBar